<template>
  <view class="catetory-panel">
    <navigator  v-for="item in props.list" :key="item.id"
      url="/pages/index/index"
      open-type="navigate"
      hover-class="navigator-hover"
    >
    <view class="category-item">
      <!-- https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/nav_icon_1.png -->
      <image
        :src="item.icon"
        mode="scaleToFill"
        class="category-img"
      />
      <view class="categrory-name">{{item.name}}</view>
    </view>
    </navigator>
    
  </view>
</template>

<script setup lang="ts">
import type { CategoryItem } from '@/types/home'

const props = defineProps<{
  list:CategoryItem[]
}>()
</script>

<style lang="scss" scoped>
.catetory-panel{
  padding: 20rpx 0;
  display: flex;
  flex-wrap: wrap;
  .category-item{
    width: 150rpx;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    .category-img{
      width: 100rpx;
      height: 100rpx;
    }
    .category-name{
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>
